<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="floor.css">
<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery.floor.js"></script>
<script src="../locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script>
var room_html='<table width="100%" height="100%" style="font-size: 12px;">'+
  '<tr>'+
    '<td width="53" rowspan="2"><img src="datebox_arrow.png" width="40" height="40"></td>'+
    '<td width="66" height="21"><a name="ownername"/></td>'+
  '</tr>'+
  '<tr>'+
    '<td height="18"><a name="roomnumber"/></td>'+
  '</tr>'+
  '<tr>'+
    '<td colspan="2">&nbsp;</td>'+
  '</tr></table>';


function loadfloor(){
  $('#floor').floor({
  url:'floor_data.json',
  colnum:10,
  roomspace:5,
  roomsize: { roomWidth:100, roomHeight: 100 },
  roomcell_html:room_html,
  pageList: [100,200,300,400,500],
  pagination:true,
  toolbar:'#tool'
  /*[{
					id:'btnadd',
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						alert('add')
					}
				},{
					id:'btncut',
					text:'Cut',
					iconCls:'icon-cut',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						alert('cut')
					}
				},'-',{
					id:'btnsave',
					text:'Save',
					disabled:true,
					iconCls:'icon-save',
					handler:function(){
						$('#btnsave').linkbutton('disable');
						alert('save')
					}
				}]*/
				,
    roomFormatStyle:function(roomTarget,roomdata){
		if(roomdata.roomid=='104'){
			$(roomTarget).addClass('room-background-red');
		}
	}
  });
}

function loadfloor2(){
  $('#floor').floor({
  url:'floor_data12.json',
  colnum:10,
  roomspace:5,
  //roomsize: { roomWidth:100, roomHeight: 100 },
  roomcell_html:room_html,
  pagination:true,
  pageList: [10,20,30,40,50]
  });
}

function getid(){

return alert($('#floor').floor('getSelectedRoomData').roomid);
}

</script>

<style>
.table{
	border: 10px solid #FFFFFF;
}
</style>
</head>
<body>
<input type="button" value="load1" onClick="loadfloor();" />
<input type="button" value="load2" onClick="loadfloor2();" />
<input type="button" value="test" onClick="getid();" />

<div id="floor" style="width:700px;height:500px;padding:0px;" title="111" iconCls="icon-ok" maximizable=true >
	<div id="tool" class="toolbar" style="display:none">
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help">Help</a>
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-undo">Undo</a>
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-redo">Redo</a>
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-back">Back</a>
		<input />
	</div>
</div>


</body>

</html>